$(function () {
    let index = 0;
    let time=null;
    $("#Img").css({
        backgroundImage: `url(./img/${index}.jpg)`,
        backgroundPositionX:-300

    });
    $("#nav_ul li").eq(0).css({
        background: "red"
    });
    // 点击小圆点
    $("#nav_ul li").mouseover(function () {
        $(this).css({
            background: "red"
        });
        $("#nav_ul li").not(this).css({
            background: "black"
        });
        index = $(this).index();//index()获取当前元素下标
        setBg();
    });
    //背景图片切换
    function setBg() {
        $("#Img").css({
            backgroundImage: `url(./img/${index}.jpg)`,
            backgroundPositionX:-300
        });
    }
    // 设置小圆点变色
    function setLi() {
        // 写法1
        // $("li").css({
        //     background: "black"
        // });
        $("#nav_ul li").eq(index).css({
            background: "red"
        });
        // 写法2
        $("#nav_ul li").eq(index).siblings("#nav_ul li").css({
            background: "black"
        });
    }
    function prev() {
        index--;
        if (index == -1) {
            index = 3;
        }
        setBg();
        setLi();
    }
    function next() {
        index++;
        if (index == 4) {
            index = 0;
        }
        setBg();
        setLi();
    }
    
    
    function scroll() {
        time = setInterval(function () {
            next();
        }, 4000);
        $("#Img").mouseover(function () {
            clearInterval(time);
        });
        $("#Img").mouseout(function () {
            time = setInterval(function () {
                next();
            }, 4000);
        });
    }
    function event() {
        
        scroll();
    }
    event();
    
});
$("a").mouseover(function(){
    $(this).css({
        color:"red"
    })
}).mouseout(function(){
    $(this).css({
        color:"#666"
    })
})